<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="./js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/rem.js"></script>
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/swiper.css" />
	</head>
	<script type="text/javascript">
		window._AMapSecurityConfig = {
			securityJsCode: "5ad161f7278989fc2f2853f59e2a0259",
		}
	</script>
	<body>
		<div id="app">
			<!-- 标题 -->
			<div class="tCenter ptitle">智慧城市可视化应用管理平台</div>
			<!-- 主体内容 -->
			<!-- 左侧 -->
			<div class="left posa">
				<!-- 环境监测 -->
				<div class="box mb20">
					<div class="box-title flex-start">
						<div class="title1 mr10">环境监测</div>
						<div class="title2">ENVIRONMENT MONITORING</div>
					</div>
					<div class="huan-box center">
						<!-- 环境左侧三个圆 -->
						<div>
							<div class="huan-box2 colum posr">
								<div class="huan-text1">PM2.5</div>
								<div class="huan-text2">53</div>
							</div>
							<div class="huan-box2 colum posr">
								<div class="huan-text1">PM10</div>
								<div class="huan-text2 cred">16</div>
							</div>
							<div class="huan-box2 colum posr">
								<div class="huan-text1">PM2.5</div>
								<div class="huan-text2">2.2</div>
							</div>
						</div>
						<!-- 环境中间大圆 -->
						<div class="huan-box3 colum">
							<div class="huan-text3 f10">良好</div>
							<div class="ctheme f24 mt5 mb5">72</div>
							<div class="cfff f10">AQI指数</div>
						</div>
						<!-- 环境右侧三个圆 -->
						<div>
							<div class="huan-box2 colum posr">
								<div class="huan-text1">NO2</div>
								<div class="huan-text2 cyellow">92</div>
							</div>
							<div class="huan-box2 colum posr">
								<div class="huan-text1">O3</div>
								<div class="huan-text2 cred">67</div>
							</div>
							<div class="huan-box2 colum posr">
								<div class="huan-text1">CO</div>
								<div class="huan-text2">28</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 区域占比排名 -->
				<div class="box">
					<div class="box-title flex-start">
						<div class="title1 mr10">区域占比排名</div>
						<div class="title2">REGIONAL PROPOPTION RANKING</div>
					</div>
					<!-- 区域占比排名echart -->
					<div id="quyuechart" class="mt20 mb20 ml10"></div>
				</div>
				<!-- 人员分布统计 -->
				<div class="box">
					<div class="box-title flex-start">
						<div class="title1 mr10">人员分布统计</div>
						<div class="title2">PERSONNEL DISTRIBUTION STATISICS</div>
					</div>
					<!-- 人员分布统计echart -->
					<div id="renyuanchart" class="mt20 mb20"></div>
				</div>
			</div>
			<!-- 右侧 -->
			<div class="right posa">
				<!-- 城市运行信息 -->
				<div class="box">
					<div class="box-title flex-start">
						<div class="title1 mr10">城市运行信息</div>
						<div class="title2">URBAN OPERATION INFORMATION</div>
					</div>
					<div class="fWrap">
						<div class="cheng-box tRight">
							<div class="f16 cfff mb5">45869</div>
							<div class="ctheme f12">城市事件统计</div>
						</div>
						<div class="cheng-box tRight">
							<div class="f16 cfff mb5">45869</div>
							<div class="ctheme f12">智能监控设备</div>
						</div>
						<div class="cheng-box tRight">
							<div class="f16 cfff mb5">45869</div>
							<div class="ctheme f12">数据分析统计</div>
						</div>
						<div class="cheng-box tRight">
							<div class="f16 cfff mb5">45869</div>
							<div class="ctheme f12">楼宇信息</div>
						</div>
					</div>
				</div>
				<!-- 整体状态趋势 -->
				<div class="box mt20">
					<div class="box-title flex-start">
						<div class="title1 mr10">整体状态趋势</div>
						<div class="title2">OVERALL STATE TREND</div>
					</div>
					<div id="zhengechart" class="mt10">
						<div class="th tr">
							<div class="td">序号</div>
							<div class="td">类型</div>
							<div class="td">地点</div>
							<div class="td">时间</div>
						</div>
						<div class="swiper swiper-vertical">
							<div class="swiper-wrapper">
								<div class="swiper-slide" v-for="(v,i) in list" :key="i">
									<div class="tr">
										<div class="td">{{i+1}}</div>
										<div class="td">{{v.type}}</div>
										<div class="td">{{v.address}}</div>
										<div class="td">{{v.time}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 重点监控区域 -->
				<div class="box mt30">
					<div class="box-title flex-start">
						<div class="title1 mr10">重点监控区域</div>
						<div class="title2">KEY MONITORING AREAS</div>
					</div>
					<div class="space-between mt20 mb20">
						<div id="huan1" class="zhong-box"></div>
						<div id="huan2" class="zhong-box"></div>
						<div id="huan3" class="zhong-box"></div>
						<div id="huan4" class="zhong-box"></div>
					</div>
					<div class="space-around">
						<img src="./img/shi1.png" class="video" alt="">
						<img src="./img/shi2.png" class="video" alt="">
					</div>
				</div>
			</div>

			<!-- 地图背景 -->
			<div class="map-box">
				<div id="map"></div>
			</div>
		</div>
		<video src="./img/back.webm" id="video-back" autoplay="true"></video>
		<script src="./js/echarts.js"></script>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script src="./js/swiper.js"></script>
		<script>
			const App = {
				data() {
					return {
						counter: 0,
						list: [{
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, {
							type: '门岗异常',
							address: '汤臣一品',
							time: '13:20'
						}, ]
					}
				},
				methods: {
					// 重点监控区域
					inithuan2() {
						var myChart = echarts.init(document.getElementById('huan2'));
						var option = {
							title: {
								text: '休闲区',
								bottom: '0',
								left: '25%',
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							series: [{
								type: 'gauge',
								startAngle: 90,
								endAngle: -270,
								center: ['50%', '40%'],
								radius: '70%',
								pointer: {
									show: false
								},
								progress: {
									show: true,
									overlap: false,
									roundCap: true,
									clip: false,
									itemStyle: {
										color: 'rgb(0, 204, 241)'
									}
								},
								axisLine: {
									lineStyle: {
										width: 5,
										color: [
											[1, 'rgba(0, 204, 241,.1)'],
										]
									}
								},
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								data: [{
									value: 65,
									name: '进度'
								}],
								title: {
									show: false
								},
								detail: {
									fontSize: 12,
									color: '#fff',
									borderWidth: 0,
									formatter: '{value}%',
									offsetCenter: [0, '10%']
								}
							}]
						};
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
					},

					// 重点监控区域
					inithuan3() {
						var myChart = echarts.init(document.getElementById('huan3'));
						var option = {
							title: {
								text: '娱乐区',
								bottom: '0',
								left: '25%',
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							series: [{
								type: 'gauge',
								startAngle: 90,
								endAngle: -270,
								center: ['50%', '40%'],
								radius: '70%',
								pointer: {
									show: false
								},
								progress: {
									show: true,
									overlap: false,
									roundCap: true,
									clip: false,
									itemStyle: {
										color: 'rgb(0, 204, 241)'
									}
								},
								axisLine: {
									lineStyle: {
										width: 5,
										color: [
											[1, 'rgba(0, 204, 241,.1)'],
										]
									}
								},
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								data: [{
									value: 46,
									name: '进度'
								}],
								title: {
									show: false
								},
								detail: {
									fontSize: 12,
									color: '#fff',
									borderWidth: 0,
									formatter: '{value}%',
									offsetCenter: [0, '10%']
								}
							}]
						};
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
					},
					// 重点监控区域
					inithuan4() {
						var myChart = echarts.init(document.getElementById('huan4'));
						var option = {
							title: {
								text: '其他区',
								bottom: '0',
								left: '25%',
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							series: [{
								type: 'gauge',
								startAngle: 90,
								endAngle: -270,
								center: ['50%', '40%'],
								radius: '70%',
								pointer: {
									show: false
								},
								progress: {
									show: true,
									overlap: false,
									roundCap: true,
									clip: false,
									itemStyle: {
										color: 'rgb(0, 204, 241)'
									}
								},
								axisLine: {
									lineStyle: {
										width: 5,
										color: [
											[1, 'rgba(0, 204, 241,.1)'],
										]
									}
								},
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								data: [{
									value: 39,
									name: '进度'
								}],
								title: {
									show: false
								},
								detail: {
									fontSize: 12,
									color: '#fff',
									borderWidth: 0,
									formatter: '{value}%',
									offsetCenter: [0, '10%']
								}
							}]
						};
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
					},

					// 重点监控区域
					inithuan1() {
						var myChart = echarts.init(document.getElementById('huan1'));
						var option = {
							title: {
								text: '商务区',
								bottom: '0',
								left: '25%',
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							series: [{
								type: 'gauge',
								startAngle: 90,
								endAngle: -270,
								center: ['50%', '40%'],
								radius: '70%',
								pointer: {
									show: false
								},
								progress: {
									show: true,
									overlap: false,
									roundCap: true,
									clip: false,
									itemStyle: {
										color: 'rgb(0, 204, 241)'
									}
								},
								axisLine: {
									lineStyle: {
										width: 5,
										color: [
											[1, 'rgba(0, 204, 241,.1)'],
										]
									}
								},
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								data: [{
									value: 75,
									name: '进度'
								}],
								title: {
									show: false
								},
								detail: {
									fontSize: 12,
									color: '#fff',
									borderWidth: 0,
									formatter: '{value}%',
									offsetCenter: [0, '10%']
								}
							}]
						};
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
					},

					// 整体状态趋势
					initzhengechart() {
						var myChart = echarts.init(document.getElementById('zhengechart'));
						let data = ['1区', '2区', '3区', '4区', '5区', '6区', '7区', '8区', '9区', '10区']
						// 指定图表的配置项和数据
						var option = {
							tooltip: {},
							legend: {
								top: 0,
								right: 0,
								itemWidth: 15,
								itemHeight: 6,
								textStyle: {
									color: '#fff',
									fontSize: 10
								}
							},
							grid: {
								top: '5%',
								bottom: '10%',
								left: '0%',
								right: '0%',
							},
							xAxis: {
								data,
								axisTick: {
									show: false
								},
								axisLine: {
									lineStyle: {
										color: '#fff'
									}
								},
								axisLabel: {
									color: '#fff',
									fontSize: 10
								}
							},
							yAxis: {
								show: false
							},
							series: [{
								name: '标准值',
								type: 'line',
								data: [5, 20, 36, 10, 10, 20, 36, 10, 20],
								areaStyle: {
									color: 'rgba(26,95,148,.2)'
								},
								itemStyle: {
									color: 'rgba(26,95,148,.8)'
								},
								smooth: true,
								showSymbol: false,
							}, {
								name: '当前值',
								type: 'line',
								data: [15, 30, 26, 20, 20, 30, 26, 20, 20],
								areaStyle: {
									color: 'rgba(0, 204, 241,.2)'
								},
								itemStyle: {
									color: 'rgba(0, 204, 241,.8)'
								},
								smooth: true,
								showSymbol: false,
							}],

							dataZoom: [{
								type: 'slider',
								show: false,
								handleSize: 2,
								startValue: 0,
								endValue: 5
							}]
						};
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
						setInterval(function() {
							// 每次向后滚动一个，最后一个从头开始。
							if (option.dataZoom[0].endValue == data.length) {
								option.dataZoom[0].endValue = 5;
								option.dataZoom[0].startValue = 0;
							} else {
								option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
								option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
							}
							myChart.setOption(option);
						}, 1800);
					},

					// 人员分布统计
					initrenyuanchart() {
						var myChart = echarts.init(document.getElementById('renyuanchart'));
						let data = ['1区', '2区', '3区', '4区', '5区', '6区', '7区', '8区', '9区', '10区']
						// 指定图表的配置项和数据
						var option = {
							tooltip: {},
							legend: {
								top: 0,
								right: 0,
								itemWidth: 15,
								itemHeight: 6,
								textStyle: {
									color: '#fff',
									fontSize: 10
								}
							},
							grid: {
								top: '5%',
								right: '0%',
								left: '12%',
								bottom: '10%',
							},
							xAxis: {
								data,
								axisTick: {
									show: false
								},
								axisLine: {
									lineStyle: {
										color: '#fff'
									}
								},
								axisLabel: {
									color: '#fff',
									fontSize: 10
								}
							},
							yAxis: {
								splitLine: {
									show: false
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: '#fff'
									}
								}
							},
							series: [{
								name: '固定',
								type: 'bar',
								data: [5, 20, 36, 10, 10, 20, 36, 10, 20],
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'white',
										fontSize: 10
									}
								},
								itemStyle: {
									color: 'rgba(26,95,148,.8)',
									borderRadius: 5,
									borderWidth: 1,
									borderColor: 'rgba(26,95,148,1)'
								},
								barWidth: 10,
								barGap: '50%'
							}, {
								name: '流动',
								type: 'bar',
								data: [15, 30, 26, 20, 20, 30, 26, 20, 20],
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'white',
										fontSize: 10
									}
								},
								itemStyle: {
									color: 'rgba(0, 204, 241,.8)',
									borderRadius: 5,
									borderWidth: 1,
									borderColor: 'rgb(0, 204, 241)'
								},
								barWidth: 10,
								barGap: '50%'
							}],

							dataZoom: [{
								type: 'slider',
								show: false,
								handleSize: 2,
								startValue: 0,
								endValue: 5
							}]
						};
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
						setInterval(function() {
							// 每次向后滚动一个，最后一个从头开始。
							if (option.dataZoom[0].endValue == data.length) {
								option.dataZoom[0].endValue = 5;
								option.dataZoom[0].startValue = 0;
							} else {
								option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
								option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
							}
							myChart.setOption(option);
						}, 1800);
					},

					// 区域占比排名
					initquyuechart() {
						let myChart = echarts.init(document.getElementById('quyuechart'));
						let data = ['1区', '2区', '3区', '4区', '5区', '6区', '7区', '8区', '9区', '10区']
						// 指定图表的配置项和数据
						let option = {
							tooltip: {},
							legend: {
								show: false
							},
							grid: {
								top: '0%',
								bottom: '0%',
								left: '15%',
								bottom: '0%',
							},
							xAxis: {
								show: false
							},
							yAxis: {
								data,
								axisTick: {
									show: false
								},
								axisLine: {
									show: false
								},
								axisLabel: {
									color: '#fff',
									fontSize: 10
								}
							},
							series: [{
								name: '销量',
								type: 'bar',
								data: [5, 20, 36, 10, 10, 20, 36, 10, 10, 18],
								label: {
									show: true, //开启显示
									position: 'right', //在上方显示
									textStyle: { //数值样式
										color: 'white',
										fontSize: 10
									}
								},
								itemStyle: {
									color: 'rgb(0, 204, 241)',
									borderRadius: 5,

								},
								barWidth: 6,
								showBackground: true,
								backgroundStyle: {
									color: 'rgba(0,0,0,.2)',
									borderRadius: 5
								}
							}],

							dataZoom: [{
								type: 'slider',
								show: false,
								handleSize: 2,
								startValue: 0,
								orient: 'vertical',
								endValue: 4
							}]
						};
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
						setInterval(function() {
							// 每次向后滚动一个，最后一个从头开始。
							if (option.dataZoom[0].endValue == data.length) {
								option.dataZoom[0].endValue = 4;
								option.dataZoom[0].startValue = 0;
							} else {
								option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
								option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
							}
							myChart.setOption(option);
						}, 1800);
					},

					initmap() {
						AMapLoader.load({
							key: "fa187876bf6d618e9f7aca8877611600", // 申请好的Web端开发者Key，首次调用 load 时必填
							version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						}).then((AMap) => {
							var map = new AMap.Map('map', {
								zoom: 13,
								center: [116.597005, 39.914388],
								pitch: 90,
								rotation: -35,
								showLabel: false,
								mapStyle: 'amap://styles/07832eb296b5864e4ad6facb7e2d8664',
								viewMode: '3D',
								showBuildingBlock: true,
							});
							// 自动旋转
							AMap.plugin([
								'AMap.ControlBar',
							], function() {
								map.addControl(new AMap.ControlBar());
								var deg = 0
								setInterval(() => {
									deg += 0.1
									map.setRotation(deg)
								}, 50)
							});

							// 添加点标记
							// 创建一个 Icon
							var startIcon = new AMap.Icon({
								// 图标尺寸
								size: new AMap.Size(100, 100),
								// 图标的取图地址
								image: './img/mapicon2.webp',
								// 图标所用图片大小
								imageSize: new AMap.Size(100, 100),
								// 图标取图偏移量
								// imageOffset: new AMap.Pixel(-65, 0)
							});
							// 初始点位数组
							let points = [
								[116.597005, 39.814388],
								[116.627005, 39.824388],
								[116.637005, 39.934388]
							]
							// 循环添加点位和折现
							let path = []
							points.forEach(p => {
								map.add(new AMap.Marker({
									position: new AMap.LngLat(p[0], p[1]),
									// 将一张图片的地址设置为 icon
									icon: startIcon,
									offset: [-40, -90]
								}))
								path.push(new AMap.LngLat(p[0], p[1]))
							})
							var polyline = new AMap.Polyline({
								path: path,
								strokeWeight: 3, // 线条宽度，默认为 1
								strokeColor: '#eb5630', // 线条颜色
								strokeOpacity: 0.6,
								lineJoin: 'round', // 折线拐点连接处样式
								lineCap: 'round'
							});
							map.add(polyline);
						}).catch((e) => {
							console.error(e); //加载错误提示
						});
					}
				},
				mounted() {
					let that = this
					this.$nextTick(() => {
						setTimeout(() => {
							var mySwiper = new Swiper('.swiper', {
								direction: 'vertical', // 垂直切换选项
								loop: true, // 循环模式选项
								autoplay: {
									delay: 1000,
									stopOnLastSlide: false,
									disableOnInteraction: true,
								},
								slidesPerView: 6,
								spaceBetween: 0,
							})
							that.initquyuechart()
							that.initrenyuanchart()
							// that.initzhengechart()
							that.inithuan1()
							that.inithuan2()
							that.inithuan3()
							that.inithuan4()
							that.initmap()

						}, 500)
					})
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
	<style>
		.left {
			height: calc(100% - 12vh);
			left: 0;
			padding-left: 30rem;
			top: 8vh;
			z-index: 99;
			background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(26, 43, 66, 0));
		}

		.right {
			height: calc(100% - 12vh);
			right: 0;
			top: 8vh;
			padding-right: 30rem;
			z-index: 99;
			background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(26, 43, 66, 0));
		}

		.ptitle {
			z-index: 99;
		}

		.video {
			width: 45%;
			height: auto;
		}

		.zhong-box {
			width: 10vh;
			height: 10vh;
		}

		.cheng-box {
			width: 50%;
			padding: 4vh 0 1vh;
			background-image: url(./img/c1.png);
			background-repeat: no-repeat;
			background-position: 0 1vh;
			background-size: 80% auto;
		}

		.cheng-box:nth-of-type(2) {
			background-image: url(./img/c2.png);
		}

		.cheng-box:nth-of-type(3) {
			background-image: url(./img/c3.png);
		}

		.cheng-box:nth-of-type(4) {
			background-image: url(./img/c4.png);
		}

		.tr {
			display: flex;
			width: 100%;
			height: 30px;
			line-height: 30px;
		}

		.td {
			color: #fff;
			text-align: center;
			flex: 1;
		}

		.swiper {
			width: 100%;
			height: 100%;
		}

		#zhengechart {
			height: 20vh;
			width: 95%;
			font-size: 12px;
		}

		#quyuechart {
			height: 20vh;
			width: 92%;
			background: url(./img/pro.png) repeat-y;
			background-size: 100% 20%;
		}
		.swiper-slide:nth-of-type(odd){
			background-color: rgba(26,95,148,.5);
		}
		#renyuanchart {
			height: 20vh;
			width: 92%;
		}

		.huan-text3 {
			color: rgb(234, 246, 255);
			border: 1px solid rgb(234, 246, 255);
			border-radius: 10rem;
			padding: 3rem 20rem;
		}

		.huan-box3 {
			width: 25vh;
			height: 25vh;
			background: url(./img/clrcle2.png) no-repeat center;
			background-size: 120% auto;
		}

		.huan-box2 {
			width: 60rem;
			height: 60rem;
			margin-top: 20rem;
		}

		.huan-box2::after {
			content: '';
			width: 100%;
			height: 100%;
			background: url(./img/clrcle.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
			top: 0;
			animation: zhuan infinite ease 2s;
		}

		@keyframes zhuan {
			0% {
				transform: rotate(0);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.huan-text2 {
			font-size: 14rem;
			font-style: normal;
			letter-spacing: 1rem;
			font-weight: normal;
			margin-right: 0rem;
			text-indent: 0rem;
			font-family: "造字工房雅圆 G0v1 常规体";
			text-shadow: rgb(0, 204, 241) 0rem 0rem 6rem;
			color: rgb(0, 204, 241);
			translate: none;
			rotate: none;
			scale: none;
			transform: translate(0rem, 0rem);
			opacity: 1;
			visibility: inherit;
		}

		.huan-text1 {
			font-size: 12rem;
			font-style: normal;
			letter-spacing: 1rem;
			font-weight: normal;
			margin-right: 0rem;
			text-indent: 0rem;
			font-family: sans-serif;
			color: rgb(234, 246, 255);
			translate: none;
			rotate: none;
			scale: none;
			transform: translate(0rem, 0rem);
			opacity: 1;
			visibility: inherit;
		}

		.title2 {
			font-size: 10rem;
			font-style: normal;
			letter-spacing: 3rem;
			font-weight: bold;
			font-family: sans-serif;
			color: rgb(64, 101, 128);
		}

		.title1 {
			font-size: 15rem;
			font-style: normal;
			letter-spacing: 3rem;
			font-weight: bold;
			font-family: sans-serif;
			color: rgb(234, 246, 255);
		}

		.box-title {
			background: url(./img/title.png) no-repeat;
			background-size: 100% 100%;
			height: 3vh;
			padding-left: 30rem;
			width: 94%;
			overflow: hidden;
		}

		.left {
			width: 420rem;
			overflow: hidden;
		}

		.ptitle {
			font-size: 36rem;
			font-style: normal;
			letter-spacing: 20rem;
			font-weight: bold;
			font-family: sans-serif;
			text-shadow: rgb(0, 29, 50) 2rem 2rem 10rem;
			color: rgb(161, 210, 255);
			height: 8vh;
			line-height: 8vh;
		}

		#video-back {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		#app {
			width: 100%;
			height: 100%;
			overflow: hidden;
			z-index: 5;
			position: absolute;
			top: 0;
			left: 0;
		}

		#map {
			height: 120vh;
			margin: -30vh auto 0;
		}

		.map-box {
			height: calc(100% - 12vh);
			overflow: hidden;
			padding: 0;
		}

		body {
			position: relative;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(26, 43, 66, 1), rgba(0, 0, 0, 1));
		}
	</style>
</html>